<template>
  <div>
    <hs-breadcrumb :breadcrumb="breadcrumb"></hs-breadcrumb>
    <Card :bordered="false" :style="{ marginBottom: '10px' }">
      <div class="hs-screen-row">
        <Select
          v-model="params.isDisable"
          placeholder="状态"
          clearable
          style="width:200px"
        >
          <Option value="">全部</Option>
          <Option value="0">已启用</Option>
          <Option value="1">已禁用</Option>
        </Select>
      </div>
      <div class="hs-screen-row">
        <Select
          v-model="params.plantType"
          placeholder="平台"
          clearable
          style="width:200px"
        >
          <Option value="">全部</Option>
          <Option
            v-for="item in platformList"
            :value="item.value"
            :key="item.value"
          >
            {{ item.label }}
          </Option>
        </Select>
      </div>
      <div class="hs-screen-row">
        <Select
          v-model="params.programId"
          placeholder="小程序"
          clearable
          style="width:200px"
        >
          <Option value="">全部</Option>
          <Option
            v-for="item in programList"
            :value="item.programId"
            :key="item.programId"
          >
            {{ item.programName }}
          </Option>
        </Select>
      </div>
      <div class="hs-screen-row">
        <Button type="primary" @click="queryMallGoodsTypeList">查询</Button>
      </div>
      <div class="hs-screen-row">
        <Button @click="resetScreen">重置</Button>
      </div>
    </Card>

    <Card :bordered="false" :style="{ marginBottom: '10px' }">
      <!--标题-->
      <div slot="title">
        <div class="hs-screen-box">
          <div>分类列表</div>
          <div>
            <ButtonGroup>
              <Button @click="queryMallGoodsTypeList">
                <Icon type="md-refresh" size="15" />
              </Button>
              <Button @click="showTypeOpe(2)">新增分类</Button>
            </ButtonGroup>
          </div>
        </div>
      </div>
      <!--表格数据-->
      <Table
        row-key="goodsMallTypeId"
        :columns="columns"
        :data="data"
        size="small"
        :stripe="true"
        :loading="isTableLoading"
      >
        <template slot-scope="{ row, index }" slot="isDisable">
          <Tag color="green" v-if="row.isDisable === 0" size="default">
            启用
          </Tag>
          <Tag color="volcano" v-if="row.isDisable === 1" size="default">
            禁用
          </Tag>
        </template>

        <template slot-scope="{ row, index }" slot="goodsTypeIntro">
          <span v-if="row.goodsTypeIntro">{{ row.goodsTypeIntro }}</span>
          <span v-else>-</span>
        </template>

        <template slot-scope="{ row, index }" slot="goodsTypePic">
          <div class="j-type-image">
            <img :src="row.goodsTypePic" />
          </div>
        </template>

        <template slot-scope="{ row }" slot="action">
          <Button
            type="success"
            size="small"
            style="margin-right: 5px"
            @click="showTypeOpe(1, row)"
          >
            查看
          </Button>
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="showTypeOpe(3, row)"
          >
            编辑
          </Button>

          <Dropdown transfer trigger="click">
            <Button size="small">
              <Icon type="ios-more" size="22" />
            </Button>
            <DropdownMenu slot="list">
              <DropdownItem
                v-if="row.children"
                @click.native="showTypeOpe(2, row)"
              >
                新增下级
              </DropdownItem>
              <DropdownItem
                v-if="row.isDisable === 0"
                @click.native="isDisableUser(row)"
              >
                禁用
              </DropdownItem>
              <DropdownItem
                v-if="row.isDisable === 1"
                @click.native="isDisableUser(row)"
              >
                启用
              </DropdownItem>
              <DropdownItem @click.native="isDelUser(row)">删除</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </template>
      </Table>
      <!--分页-->
      <div class="hs-page">
        <Page
          :total="total"
          show-sizer
          show-total
          transfer
          @on-change="changePage"
          @on-page-size-change="changePageSize"
        />
      </div>
    </Card>

    <!--显示模态框-->
    <type-ope ref="typeOpe" @changeDate="queryMallGoodsTypeList"></type-ope>
  </div>
</template>

<script>
  import hsBreadcrumb from '@/components/hs-breadcrumb';
  import typeOpe from './components/type-ope';
  import { platformList } from '@/constant/program';

  export default {
    name: 'admin',
    data() {
      return {
        platformList,
        total: 0,
        isTableLoading: false,
        // 参数
        params: {
          isDisable: '',
          plantType: '',
          programId: ''
        },
        allProgram: [],
        // 表格列
        columns: [
          {
            title: '分类名称',
            minWidth: 200,
            key: 'goodsTypeName',
            tree: true
          },
          {
            title: '分类图片',
            minWidth: 120,
            slot: 'goodsTypePic'
          },
          {
            title: '分类简介',
            minWidth: 120,
            slot: 'goodsTypeIntro'
          },
          {
            title: '平台',
            minWidth: 120,
            key: 'plantTypeName'
          },
          {
            title: '小程序',
            minWidth: 120,
            key: 'programName'
          },
          {
            title: '分类等级',
            minWidth: 120,
            key: 'level'
          },
          {
            title: '分类排序',
            minWidth: 120,
            key: 'sort'
          },
          {
            title: '状态',
            slot: 'isDisable',
            align: 'center',
            width: 120
          },
          {
            title: '创建时间',
            key: 'createTime',
            width: 150
          },
          {
            title: '操作',
            slot: 'action',
            width: 180,
            align: 'center'
          }
        ],
        // 表格数据
        data: [],
        // 面包屑
        breadcrumb: [
          { name: '首页', url: '', icon: 'ios-home-outline', size: 18 },
          { name: '系统管理', url: '', icon: '', size: 0 },
          { name: '分类列表', url: '', icon: '', size: 0 }
        ]
      };
    },
    created() {
      // 分类-列表查询
      this.queryAllProgram().then(() => {
        this.queryMallGoodsTypeList();
      });
    },
    computed: {
      programList() {
        return this.allProgram.filter(
          item => item.platform == this.params.plantType
        );
      }
    },
    methods: {
      queryAllProgram() {
        return new Promise(resolve => {
          this.axios
            .post('/program/findList', { rows: 999, page: 1 })
            .then(res => {
              if (res.status == 200) {
                this.allProgram = res.data.rows;
              }
              resolve(true);
            });
        });
      },
      // 分类-列表查询
      queryMallGoodsTypeList() {
        this.isTableLoading = true;
        this.axios
          .post('/mallGoodsType/queryMallGoodsTypeList', this.params)
          .then(res => {
            this.isTableLoading = false;
            if (res.status == 200) {
              this.total = res.data.total;
                this.data = res.data.map(item => ({
                    ...item,
                    plantTypeName: (
                        platformList.find(item2 => item2.value == item.plantType) || {}
                    ).label,
                    programName: (
                        this.allProgram.find(item2 => item2.programId == item.programId) || {}
                    ).programName
                }));
            }
            if (res.status == 500) {
              this.$Notice.error({
                title: '服务器内部错误',
                desc: '查询分类列表接口报错',
                duration: 0
              });
            }
          });
      },
      // 是否删除分类
      isDelUser(row) {
        // console.log(row)
        this.$Modal.confirm({
          title: `是否删除分类${row.goodsTypeName}？`,
          onOk: () => {
            // this.$Message.info('您点击了确定.');
            this.deleteMallGoodsType(row);
          },
          onCancel: () => {
            this.$Message.info('您点击了取消.');
          }
        });
      },
      // 是否禁用分类
      isDisableUser(row) {
        // console.log(row)
        this.$Modal.confirm({
          title: `是否${row.isDisable ? '开启' : '禁用'}${
            row.goodsTypeName
          }分类？`,
          onOk: () => {
            this.disableMallGoodsType(row);
          },
          onCancel: () => {
            this.$Message.info('您点击了取消.');
          }
        });
      },
      // 删除分类
      deleteMallGoodsType(row) {
        this.$Spin.show();
        this.axios
          .post('/mallGoodsType/deleteMallGoodsType', {
            goodsMallTypeId: row.goodsMallTypeId
          })
          .then(res => {
            setTimeout(() => {
              this.$Spin.hide();
            }, 300);
            if (res.status == 200) {
              this.$Message.success('操作成功.');
              this.queryMallGoodsTypeList();
            }
            if (res.status == 201) {
              // this.$Message.error(res.msg);
              this.$Notice.error({
                title: '删除分类失败',
                desc: res.msg
              });
            }
            if (res.status == 500) {
              this.$Notice.error({
                title: '服务器内部错误',
                desc: '删除分类接口报错',
                duration: 0
              });
            }
          });
      },
      // 禁用或开启分类
      disableMallGoodsType(row) {
        this.$Spin.show();
        this.axios
          .post('/mallGoodsType/disableMallGoodsType', {
            goodsMallTypeId: row.goodsMallTypeId,
            isDisable: row.isDisable ? 0 : 1
          })
          .then(res => {
            setTimeout(() => {
              this.$Spin.hide();
            }, 300);
            if (res.status == 200) {
              this.$Message.success('操作成功.');
              this.queryMallGoodsTypeList();
            }
            if (res.status == 500) {
              this.$Notice.error({
                title: '服务器内部错误',
                desc: '禁用分类接口报错',
                duration: 0
              });
            }
          });
      },
      // 显示操作模态框
      showTypeOpe(type, row) {
        /**
         * type判断
         * 1.查看 2.新增 3.编辑
         */
        this.$refs.typeOpe.show(type, row);
      },
      // 重置筛选条件
      resetScreen() {
        this.params.isDisable = '';
      },
      // 改变页数
      changePage(e) {
        this.params.page = e;
        this.queryMallGoodsTypeList();
      },
      // 改变页容量
      changePageSize(e) {
        this.params.rows = e;
        this.queryMallGoodsTypeList();
      }
    },
    components: {
      hsBreadcrumb,
      typeOpe
    }
  };
</script>

<style scoped>
  .j-type-image {
    padding: 5px;
    width: 50px;
    height: 50px;
  }
  .j-type-image img {
    width: auto;
    height: 100%;
  }
</style>
